<template>
  <div class="login_wrap">
    <div class="logo u-f u-f-ac u-f-jc">
      <i class="iconfont icon-musiccloud"></i>
    </div>
    <div class="login_box">
      <van-field
        v-model="phone"
        type="number"
        maxlength="11"
        clearable
        left-icon=" iconfont icon-yonghu1"
        placeholder="请输入手机号"
      />
      <van-field
        v-model="password"
        type="password"
        clearable
        left-icon=" iconfont icon-mima"
        placeholder="请输入密码"
      />
      <van-button round block color="#ffffff" @click="handleLogin"
        >登录</van-button
      >
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { Router, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { Toast } from 'vant'
import { login } from '@/api/login'

const useLogin = (router: Router) => {
  const store = useStore()
  const loginForm = reactive({
    phone: '',
    password: '',
  })

  const handleLogin = async () => {
    // Toast('请输入密码')
    if (!loginForm.phone) {
      return Toast('请输入手机号')
    } else if (!loginForm.password) {
      return Toast('请输入密码')
    }

    const { data } = await login(loginForm)

    if (data.code === 200) {
      store.commit('setLoginInfo', data)
    }

    router.replace('/')
  }

  return {
    ...toRefs(loginForm),
    handleLogin,
  }
}

export default defineComponent({
  name: 'Login',
  setup() {
    const router = useRouter()

    return {
      ...useLogin(router),
    }
  },
})
</script>

<style lang="less" scoped>
.login_wrap {
  position: relative;
  min-height: 100vh;
  background-color: var(--sky-login-bg-background-color);
  overflow: hidden;
  .logo {
    width: 73px;
    height: 73px;
    border-radius: 73px;
    background-color: var(--sky-red-background-color);
    margin: 120px auto 0;
    .icon-musiccloud {
      font-size: 40px;
      color: var(--sky-text-white-color);
    }
  }
  .login_box {
    position: absolute;
    left: 50%;
    bottom: 130px;
    width: 268px;
    transform: translateX(-50%);
    .van-cell {
      border-radius: 50px;
      margin-bottom: 20px;
    }
  }
}
</style>

<style lang="less">
.login_box {
  .van-button__text {
    font-weight: 700;
    color: var(--sky-text-red-color);
    letter-spacing: 5px;
  }
}
</style>